<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        #sro{
            min-width: 1500px;
            width: 100%;
        }
        .sro1{
            width: 1200px;
            height: 700px;
            margin: auto;
            border: 1px solid #31b0d5;
        }
        .sro2{
            width: 1200px;
            height: 700px;
            margin:50px  auto;
            border: 1px solid #31b0d5;
        }
        .sro3{
            width: 1200px;
            height: 700px;
            margin:50px  auto;
            border: 1px solid #31b0d5;
        }
        .sro4{
            width: 1200px;
            height: 700px;
            margin:50px  auto;
            border: 1px solid #31b0d5;

        }
        .column{
            width: 80px;
            border: 1px solid #0F3F89;
            position: fixed;
            top: 150px;
            right: 45px;
            /*transform: translate(0, -50%);*/
        }
        ul{
            text-align: center;
        }
        li{
            height: 50px;
            margin-top: 20px;
            list-style: none;
            line-height: 50px;
        }
        .list_1_1{
           background: red;
        }
        .list_2_a{
            background: #0F3F89;
        }
        .list_3_b{
            background: red;
        }
        .list_4_c{
            background: #323e54;
        }
    </style>
</head>
<body>
    <div id="sro">
        <div style="width: 1200px;margin: auto;position: relative">
            <div class="sro1">

            </div>
            <div class="sro2">

            </div>
            <div class="sro3">

            </div>
            <div class="sro4">

            </div>
            <div class="column">
                <ul>
                    <li class="list_1">sro1</li>
                    <li class="list_2">sro2</li>
                    <li class="list_3">sro3</li>
                    <li class="list_4">sro4</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script>
        $(function () {
            $("ul .list_1").addClass("list_1_1");
            var a = $(window).scroll(function () { //给window的滚动条绑定scroll事件
                if ($(window).scrollTop() >= 700 ) {
                 $("ul .list_2").addClass("list_2_a");
                   $("ul .list_1").removeClass("list_1_1");
                    $("ul .list_3").removeClass("list_3_b");
                }else if($(window).scrollTop() < 700){
                    $("ul .list_1").addClass("list_1_1");
                    $("ul .list_2").removeClass("list_2_a");
                }
                if ($(window).scrollTop() > 1400) {
                    $("ul .list_2").removeClass("list_2_a");
                    $("ul .list_3").addClass("list_3_b");
                }else if ($(window).scrollTop() < 1400){
                    $("ul .list_3").removeClass("list_3_b");
                }
                if ($(window).scrollTop() > 2000) {
//                    $("ul .list_2").removeClass("list_2_a");
                    $("ul .list_4").addClass("list_4_c");
                    $("ul .list_3").removeClass("list_3_b");
                }else if ($(window).scrollTop() < 2000){
                    $("ul .list_4").removeClass("list_4_c");
                }


            console.log($(document).height(500));

//                console.log($(".sro2").scrollHeight());
            });

        })
    </script>
</body>
</html>